<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog v-model="props.addAlgorithmParameterVisible" :title="modalType === 'edit'?'修改算法参数':'新增算法参数'" width="500" destroy-on-close @close="handleVisible('cancel')">
    <div class="add_algorithmParameter">
      <el-form ref="addAlgorithmParameterForm" :rules="rules" :model="formData" size="small" class="form_class" label-width="100">
        <el-form-item label="算法名:" prop="analysisRefId">
          <el-select
            :disabled="modalType === 'edit'"
            clearable
            v-model="formData.analysisRefId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入算子名"
            :remote-method="remoteMethod"
            :loading="selectLoading"
            @change="handleAnalysisChange"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="算子名:" prop="operatorRefId">
          <el-select
            :disabled="modalType === 'edit'"
            clearable
            v-model="formData.operatorRefId"
            placeholder="请选择算子名"
            @change="handleOperatorChange"
          >
            <el-option v-for="item in operatorOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="field_id" prop="fieldId">
          <el-select v-model="formData.fieldId" placeholder="请选择fieldId" :disabled="modalType === 'edit'" @change="fielIdChange">
            <el-option v-for="item in fieldIds" :key="item.fieldId" :label="item.fieldId" :value="item.fieldId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="label" prop="label">
          <el-input v-model="formData.label" placeholder="请输入label"/>
        </el-form-item>
        <el-form-item label="path" prop="path">
          <el-input v-model="formData.path" placeholder="请输入path"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleVisible('cancel')">取消</el-button>
        <el-button type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>      
<script name="AddOperatorParameter" setup>
import {
  getOperatorByAnalysis,
  saveAlgorithmParameter,
  updateAlgorithmParameter,
  getAlgorithmList,
  getOperatorFielIds
} from '@/api/parameterLibrary';

const props = defineProps(['addAlgorithmParameterVisible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const addAlgorithmParameterForm = ref(null);
const formData = ref({
  analysisRefId: '',
  operatorRefId:'',
  fieldId: props.rowData?.fieldId || '',
  label: props.rowData?.label || '',
  path: props.rowData?.path || ''
});
//弹窗类型
const modalType = props.rowData?._id ? 'edit' : 'add';
// 修改时设置form表单值
if(modalType === 'edit'){
  formData.value.analysisRefId = props.rowData?.analysisType;
  formData.value.operatorRefId = props.rowData?.operatorName;
  formData.value._id = props.rowData?._id;
}
const rules = ref({
  analysisRefId: [{ required: true, message: '请选择算法名', trigger: 'blur' }],
  operatorRefId: [{ required: true, message: '请选择算子名', trigger: 'blur' }],
  fieldId: [{ required: true, message: '请选择field_id', trigger: 'blur' }],
  path: [{ required: true, message: '请输入path', trigger: 'blur' }]
});
const selectLoading = ref(false);
const options = ref([]);
const operatorOptions = ref([]);
const fieldIds = ref([]);


//加载算子下拉选项
const remoteMethod = (query) => {
  if (query) {
    selectLoading.value = true;
    const params = {
      pageNum: 1,
      pageSize: 10,
      displayName: query,
      isAsc: 'descending'
    };
    setTimeout(() => {
      getAlgorithmList(params)
        .then((res) => {
          if (res?.rows) {
            options.value = res?.rows.map((el) => {
              return { label: el.analysisType, value: el._id };
            });
          }
        })
        .finally(() => {
          selectLoading.value = false;
        });
    }, 200);
  } else {
    options.value = [];
  }
};
// 算法切换
const handleAnalysisChange = (event) => {
  getOperatorByAnalysis({ analysisRefId: event }).then((res) => {
    if (res?.data) {
      operatorOptions.value = res?.data.map((el) => {
        return { label: el.operatorName, value: el.operatorRefId };
      });
    }
  });
};
// 算子切换
const handleOperatorChange = (event) => {
  getOperatorFielIds({ operatorRefId: event }).then((res) => {
    if (res?.data) {
      fieldIds.value = res?.data.map((el) => {
        return { ...el, label: el.fieldId, value: el.fieldId };
      });
    }
  });
};

//field切换
const fielIdChange = (event) => {
  // 设置form表单
  const field = fieldIds.value.filter(el=>{
    return event === el.fieldId
  });
  formData.value.label = field[0].label;
  formData.value.path = field[0].path;
};
// 通知父组件
const handleVisible = (modalType) => {
  emit('handleEvent', { type: modalType });
};
// 提交数据
const submitAdd = () => {
  addAlgorithmParameterForm.value.validate((valid) => {
    if (!valid) {
      return;
    } else {
      //提交
      if (modalType === 'edit') {
        updateAlgorithmParameter(formData.value).then((res) => {
          ElMessage({ showClose: true, message: '修改成功', type: 'success' });
          handleVisible('refresh');
        });
      } else {
        saveAlgorithmParameter(formData.value).then((res) => {
          ElMessage({ showClose: true, message: '新增成功', type: 'success' });
          handleVisible('refresh');
        });
      }
    }
  });
};
</script>
<style scoped lang="scss">
:deep(.el-cascader) {
  width: 100%;
}
</style>